<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/base.css"/>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/style.css"/>
    <script type="text/javascript" src="js/lib/jquery-1.11.1.js"></script>
    <script type="text/javascript" src="js/lib/jquery.form.js"></script>
    <script type="text/javascript" src="js/jquery.validate.min.js"></script>
</head>
<body>
    <div class="main">
        <form id="frm1" action="http://localhost/yonps" method="post">
            <p>
                <input type="text" name="username" data-rule-required="true" data-rule-email="true" data-msg-required="请输入您的电子邮件地址" data-msg-email="请输入一个有效的电子邮件地址" class="form-control">
            </p>
            <p>
                <input type="text" name="password" class="form-control">
            </p>
            <p>
                <input type="text" name="tel" class="form-control">
            </p>
            <p>
                <input type="text" name="email" class="form-control">
            </p>
            <input type="submit" class="btn btn-success" value="提交">
        </form>
        <hr>
        <form id="frm2" action="" method="post">
            <p class="clearfix">
                <input type="text" name="username"  class="form-control fl">
                <span class="errorMsg fl"></span>
            </p>
            <p class="clearfix">
                <input type="text" name="password" class="form-control fl">
                <span class="errorMsg fl"></span>
            </p>
            <p class="clearfix">
                <input type="text" name="phone" class="form-control fl">
                <span class="errorMsg fl"></span>
            </p>
            <p class="clearfix">
                <input type="text" name="email" class="form-control fl">
                <span class="errorMsg fl"></span>
            </p>
            <input type="submit" class="btn btn-success" value="提交">
        </form>
    </div>
</body>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript">
    $(function(){
        $("#frm1").validate();
        $("#frm2").validate({
            rules: {
                username: {
                    required: true,
                    minlength: 6
                },
                password: {
                    required: true,
                    minlength: 6,
                    maxlength: 10
                },

                phone: {
                    required: true,
                    minlength: 11,
                    maxlength: 11
                },
                email: {
                    required: true,
                    minlength: 6,
                    email:true
                }
            },
            messages:{
                username:{
                    required:"必需输入用户名",
                    minlength:"用户名不能小于6个字符"
                },
                password: {
                    required: "请输入您的密码",
                    minlength: "密码长度不能少于6个字符",
                    maxlength: "密码长度不能超过16个字符"
                },
                phone: {
                    required: "请填写手机号码",
                    minlength: "手机号不能少于11位",
                    maxlength: "手机号为11位",
                    isMobile : "请正确填写您的手机号码"
                },
                email:{
                    required:"请填写邮件地址"
                }
            }
        });
    });
    $(function(){

    });
</script>
</html>